<template>
  <view class="pilot-hall-page">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="navbar-left" @click="navigateBack">
        <text class="icon-arrow-left">←</text>
      </view>
      <view class="navbar-title">飞手大厅</view>
      <view class="navbar-right" @click="showFilter">
        <text class="icon-filter" style="font-size: 30rpx;">筛选</text>
      </view>
    </view>

    <!-- 飞手申请入口 (仅非飞手可见) -->
    <view class="apply-pilot-card" v-if="!isPilot">
      <view class="card-content">
        <view class="card-icon">
          <text class="icon-pilot">✈️</text>
        </view>
        <view class="card-text">
          <view class="card-title">成为认证飞手</view>
          <view class="card-desc">加入我们的飞手团队，获取更多接单机会</view>
        </view>
        <button class="apply-btn" @click="navigateToApply">
          立即申请
        </button>
      </view>
    </view>

    <!-- 筛选栏 -->
    <view class="filter-bar">
      <view class="filter-item active" @click="setFilter('all')">
        <text>全部</text>
      </view>
      <view class="filter-item" @click="setFilter('rating')">
        <text>评分优先</text>
      </view>
      <view class="filter-item" @click="setFilter('orders')">
        <text>接单最多</text>
      </view>
      <view class="filter-item" @click="setFilter('distance')">
        <text>距离最近</text>
      </view>
    </view>

    <!-- 飞手列表 -->
    <view class="pilot-list">
      <view 
        class="pilot-item" 
        v-for="(pilot, index) in filteredPilots" 
        :key="index"
      >
        <!-- 飞手头像和等级 -->
        <view class="pilot-avatar-container">
          <view class="pilot-avatar">
            <image :src="pilot.avatar" mode="cover"></image>
          </view>
          <view class="pilot-level" :class="'level-' + pilot.level">
            {{ pilot.level }}级飞手
          </view>
        </view>
        
        <!-- 飞手信息 -->
        <view class="pilot-info-container">
          <view class="pilot-name-rating">
            <view class="pilot-name">{{ pilot.name }}</view>
            <view class="pilot-rating">
              <text class="star">★</text>
              <text class="rating-value">{{ pilot.rating }}</text>
              <text class="rating-count">({{ pilot.ratingCount }})</text>
            </view>
          </view>
          
          <view class="pilot-stats">
            <view class="stat-item">
              <text class="stat-label">完成订单</text>
              <text class="stat-value">{{ pilot.completedOrders }}单</text>
            </view>
            <view class="stat-item">
              <text class="stat-label">距离</text>
              <text class="stat-value">{{ pilot.distance }}km</text>
            </view>
            <view class="stat-item">
              <text class="stat-label">响应时间</text>
              <text class="stat-value">{{ pilot.responseTime }}分钟</text>
            </view>
          </view>
          
          <view class="pilot-skills">
            <text class="skills-label">擅长：</text>
            <view class="skill-tags">
              <view class="skill-tag" v-for="(skill, i) in pilot.skills" :key="i">
                {{ skill }}
              </view>
            </view>
          </view>
        </view>
        
        <!-- 联系按钮 -->
        <view class="pilot-contact-container">
          <button class="contact-btn" @click="contactPilot(pilot.phone)">
            <text class="phone-icon">📞</text>
            <text>联系</text>
          </button>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <view class="load-more" v-if="hasMore">
      <view class="loading" v-if="loading">
        <view class="spinner"></view>
        <text>加载中...</text>
      </view>
      <view class="load-btn" v-else @click="loadMore">
        加载更多
      </view>
    </view>

    <!-- 联系确认弹窗 -->
    <view class="modal-overlay" v-if="showContactModal" @click="showContactModal = false">
      <view class="modal-dialog" @click.stop>
        <view class="modal-title">联系飞手</view>
        <view class="modal-content">
          <view class="contact-info">
            <text class="contact-label">飞手：</text>
            <text class="contact-value">{{ contactPilotName }}</text>
          </view>
          <view class="contact-info">
            <text class="contact-label">电话：</text>
            <text class="contact-value">{{ contactPilotPhone }}</text>
          </view>
          <view class="contact-note">
            点击拨号按钮将直接拨打该飞手电话，沟通接单详情
          </view>
        </view>
        <view class="modal-buttons">
          <button class="modal-btn cancel" @click="showContactModal = false">
            取消
          </button>
          <button class="modal-btn confirm" @click="makeCall">
            拨号联系
          </button>
        </view>
      </view>
    </view>

    <!-- 筛选弹窗 -->
    <view class="modal-overlay" v-if="showFilterModal" @click="showFilterModal = false">
      <view class="modal-dialog filter-modal" @click.stop>
        <view class="modal-title">筛选飞手</view>
        <view class="filter-content">
          <view class="filter-section">
            <view class="filter-section-title">服务范围</view>
            <view class="range-options">
              <view 
                class="range-option" 
                :class="{ selected: selectedRange === range.value }"
                v-for="range in rangeOptions" 
                :key="range.value"
                @click="selectedRange = range.value"
              >
                {{ range.label }}
              </view>
            </view>
          </view>
          
          <view class="filter-section">
            <view class="filter-section-title">擅长技能</view>
            <view class="skill-options">
              <view 
                class="skill-option" 
                :class="{ selected: selectedSkills.includes(skill.value) }"
                v-for="skill in allSkills" 
                :key="skill.value"
                @click="toggleSkill(skill.value)"
              >
                {{ skill.label }}
              </view>
            </view>
          </view>
          
          <view class="filter-section">
            <view class="filter-section-title">最低评分</view>
            <view class="rating-slider">
              <slider 
                :min="3" 
                :max="5" 
                :step="0.5" 
                :value="minRating"
                @change="setMinRating"
                activeColor="#367AF6"
              ></slider>
              <view class="rating-display">
                <text>最低 {{ minRating }} 星</text>
              </view>
            </view>
          </view>
        </view>
        <view class="modal-buttons">
          <button class="modal-btn cancel" @click="resetFilters">
            重置
          </button>
          <button class="modal-btn confirm" @click="applyFilters">
            确认筛选
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 当前用户是否为飞手
      isPilot: false,
      
      // 筛选状态
      activeFilter: 'all',
      showFilterModal: false,
      
      // 筛选条件
      selectedRange: 50,
      selectedSkills: [],
      minRating: 4,
      
      // 筛选选项
      rangeOptions: [
        { label: '10km内', value: 10 },
        { label: '30km内', value: 30 },
        { label: '50km内', value: 50 },
        { label: '100km内', value: 100 },
        { label: '不限', value: 999 }
      ],
      
      allSkills: [
        { label: '航拍', value: 'aerial' },
        { label: '测绘', value: 'survey' },
        { label: '巡检', value: 'inspection' },
        { label: '植保', value: 'planting' },
        { label: '物流', value: 'logistics' },
        { label: '表演', value: 'performance' }
      ],
      
      // 飞手数据
      pilots: [],
      filteredPilots: [],
      
      // 加载状态
      loading: false,
      hasMore: true,
      
      // 联系飞手相关
      showContactModal: false,
      contactPilotPhone: '',
      contactPilotName: ''
    };
  },
  
  onLoad() {
    // 模拟获取用户身份（是否为飞手）
    this.checkUserRole();
    
    // 加载飞手数据
    this.loadPilots();
  },
  
  methods: {
    // 检查用户是否为飞手
    checkUserRole() {
      // 实际项目中从用户信息接口获取
      setTimeout(() => {
        this.isPilot = false; // 默认为非飞手
      }, 500);
    },
    
    // 加载飞手数据
    loadPilots() {
      this.loading = true;
      
      // 模拟API请求
      setTimeout(() => {
        const newPilots = [
          {
            id: 1,
            name: '张明',
            avatar: 'https://picsum.photos/id/1012/200/200',
            level: 5,
            rating: 4.9,
            ratingCount: 128,
            completedOrders: 326,
            distance: 2.5,
            responseTime: 15,
            phone: '13800138000',
            skills: ['航拍', '测绘', '巡检']
          },
          {
            id: 2,
            name: '李强',
            avatar: 'https://picsum.photos/id/1025/200/200',
            level: 4,
            rating: 4.7,
            ratingCount: 95,
            completedOrders: 217,
            distance: 5.8,
            responseTime: 20,
            phone: '13900139000',
            skills: ['航拍', '表演']
          },
          {
            id: 3,
            name: '王芳',
            avatar: 'https://picsum.photos/id/1027/200/200',
            level: 5,
            rating: 4.8,
            ratingCount: 156,
            completedOrders: 402,
            distance: 8.3,
            responseTime: 10,
            phone: '13700137000',
            skills: ['植保', '巡检']
          },
          {
            id: 4,
            name: '赵伟',
            avatar: 'https://picsum.photos/id/1074/200/200',
            level: 3,
            rating: 4.5,
            ratingCount: 67,
            completedOrders: 153,
            distance: 12.1,
            responseTime: 30,
            phone: '13600136000',
            skills: ['航拍', '物流', '测绘']
          },
          {
            id: 5,
            name: '陈杰',
            avatar: 'https://picsum.photos/id/177/200/200',
            level: 4,
            rating: 4.6,
            ratingCount: 89,
            completedOrders: 198,
            distance: 15.7,
            responseTime: 25,
            phone: '13500135000',
            skills: ['测绘', '巡检']
          }
        ];
        
        this.pilots = this.pilots.concat(newPilots);
        this.filteredPilots = [...this.pilots];
        this.applySorting();
        
        this.loading = false;
        this.hasMore = this.pilots.length < 15; // 模拟最多15条数据
      }, 1000);
    },
    
    // 加载更多飞手
    loadMore() {
      if (!this.loading && this.hasMore) {
        this.loadPilots();
      }
    },
    
    // 设置筛选条件
    setFilter(type) {
      this.activeFilter = type;
      this.applySorting();
    },
    
    // 应用排序
    applySorting() {
      switch (this.activeFilter) {
        case 'rating':
          this.filteredPilots.sort((a, b) => b.rating - a.rating);
          break;
        case 'orders':
          this.filteredPilots.sort((a, b) => b.completedOrders - a.completedOrders);
          break;
        case 'distance':
          this.filteredPilots.sort((a, b) => a.distance - b.distance);
          break;
        default:
          // 保持原顺序
          break;
      }
    },
    
    // 显示筛选弹窗
    showFilter() {
      this.showFilterModal = true;
    },
    
    // 切换技能筛选
    toggleSkill(skill) {
      const index = this.selectedSkills.indexOf(skill);
      if (index > -1) {
        this.selectedSkills.splice(index, 1);
      } else {
        this.selectedSkills.push(skill);
      }
    },
    
    // 设置最低评分
    setMinRating(e) {
      this.minRating = e.detail.value;
    },
    
    // 重置筛选条件
    resetFilters() {
      this.selectedRange = 50;
      this.selectedSkills = [];
      this.minRating = 4;
    },
    
    // 应用筛选条件
    applyFilters() {
      // 根据筛选条件过滤数据
      this.filteredPilots = this.pilots.filter(pilot => {
        // 评分筛选
        if (pilot.rating < this.minRating) return false;
        
        // 距离筛选
        if (pilot.distance > this.selectedRange && this.selectedRange !== 999) return false;
        
        // 技能筛选
        if (this.selectedSkills.length > 0) {
          const hasSkill = this.selectedSkills.some(skill => {
            return pilot.skills.some(s => s.toLowerCase().includes(skill));
          });
          if (!hasSkill) return false;
        }
        
        return true;
      });
      
      this.applySorting();
      this.showFilterModal = false;
    },
    
    // 联系飞手
    contactPilot(phone) {
      // 找到对应的飞手姓名
      const pilot = this.pilots.find(p => p.phone === phone);
      if (pilot) {
        this.contactPilotName = pilot.name;
        this.contactPilotPhone = phone;
        this.showContactModal = true;
      }
    },
    
    // 拨打电话
    makeCall() {
      uni.makePhoneCall({
        phoneNumber: this.contactPilotPhone,
        success: () => {
          console.log('拨打电话成功');
        },
        fail: (err) => {
          console.log('拨打电话失败', err);
        }
      });
      this.showContactModal = false;
    },
    
    // 导航到飞手申请页面
    navigateToApply() {
      uni.navigateTo({
        url: '/pages/pilot/pilot'
      });
    },
    
    // 返回上一页
    navigateBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style scoped>
.pilot-hall-page {
  background-color: #f5f7fa;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

/* 导航栏样式 */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  padding: 0 30rpx;
  background: linear-gradient(135deg, #1E40AF, #3B82F6);
  color: #fff;
  position: relative;
}

.navbar::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  transform: scaleY(0.5);
}

.navbar-left, .navbar-right {
  width: 60rpx;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-title {
  font-size: 36rpx;
  font-weight: 500;
}

.icon-arrow-left, .icon-filter {
  font-size: 36rpx;
}

/* 飞手申请卡片 */
.apply-pilot-card {
  margin: 24rpx;
  border-radius: 16rpx;
  background: linear-gradient(135deg, #367AF6, #1E40AF);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 8rpx 24rpx rgba(54, 122, 246, 0.2);
}

.card-content {
  display: flex;
  align-items: center;
  padding: 30rpx 24rpx;
}

.card-icon {
  width: 80rpx;
  height: 80rpx;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
  margin-right: 24rpx;
}

.card-text {
  flex: 1;
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.card-desc {
  font-size: 24rpx;
  opacity: 0.9;
}

.apply-btn {
  background-color: #fff;
  color: #367AF6;
  border: none;
  height: 64rpx;
  line-height: 64rpx;
  padding: 0 24rpx;
  border-radius: 32rpx;
  font-size: 26rpx;
  font-weight: 500;
}

/* 筛选栏 */
.filter-bar {
  display: flex;
  background-color: #fff;
  padding: 0 16rpx;
  height: 80rpx;
  border-bottom: 1px solid #F2F3F5;
}

.filter-item {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: #606266;
  position: relative;
}

.filter-item.active {
  color: #367AF6;
}

.filter-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 60%;
  height: 4rpx;
  background-color: #367AF6;
  border-radius: 2rpx;
}

/* 飞手列表 */
.pilot-list {
  padding: 16rpx 24rpx;
}

.pilot-item {
  display: flex;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
  width: 100%;
  box-sizing: border-box;
}

.pilot-item:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
}

/* 飞手头像和等级 - 固定宽度区域 */
.pilot-avatar-container {
  width: 140rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 24rpx;
  flex-shrink: 0;
}

.pilot-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  overflow: hidden;
  border: 2rpx solid #F2F3F5;
  margin-bottom: 12rpx;
}

.pilot-avatar image {
  width: 100%;
  height: 100%;
  display: block;
}

.pilot-level {
  font-size: 22rpx;
  font-weight: 500;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  background-color: #F2F3F5;
}

.level-5 {
  background-color: #FFF1F0;
  color: #FF4D4F;
}

.level-4 {
  background-color: #FFF7E8;
  color: #FF7D00;
}

.level-3 {
  background-color: #FFFBE6;
  color: #FAAD14;
}

/* 飞手信息 - 自适应中间区域 */
.pilot-info-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0; /* 解决文本溢出问题 */
}

.pilot-name-rating {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
  width: 100%;
}

.pilot-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #1D2129;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pilot-rating {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.star {
  color: #FAAD14;
  font-size: 24rpx;
  margin-right: 4rpx;
}

.rating-value {
  font-size: 26rpx;
  font-weight: bold;
  color: #FAAD14;
  margin-right: 4rpx;
}

.rating-count {
  font-size: 22rpx;
  color: #86909C;
}

/* 飞手统计数据 */
.pilot-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16rpx;
  width: 100%;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  flex-direction: column;
  margin-right: 16rpx;
}

.stat-label {
  font-size: 20rpx;
  color: #86909C;
  margin-bottom: 4rpx;
}

.stat-value {
  font-size: 24rpx;
  color: #1D2129;
  font-weight: 500;
}

/* 飞手技能 */
.pilot-skills {
  display: flex;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
}

.skills-label {
  font-size: 24rpx;
  color: #86909C;
  margin-right: 12rpx;
  white-space: nowrap;
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
}

.skill-tag {
  background-color: #F2F7FF;
  color: #367AF6;
  font-size: 22rpx;
  padding: 4rpx 14rpx;
  border-radius: 14rpx;
  margin-right: 10rpx;
  margin-bottom: 8rpx;
}

/* 联系按钮 - 固定宽度区域 */
.pilot-contact-container {
  width: 160rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-btn {
  background-color: #FF7D00;
  color: #fff;
  border: none;
  width: 140rpx;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-icon {
  margin-right: 6rpx;
  font-size: 24rpx;
}

/* 加载更多 */
.load-more {
  padding: 30rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading {
  display: flex;
  align-items: center;
  color: #86909C;
  font-size: 26rpx;
}

.spinner {
  width: 30rpx;
  height: 30rpx;
  border: 3rpx solid rgba(134, 144, 156, 0.3);
  border-radius: 50%;
  border-top-color: #86909C;
  animation: spin 1s ease-in-out infinite;
  margin-right: 12rpx;
}

.load-btn {
  color: #367AF6;
  font-size: 26rpx;
  padding: 10rpx 20rpx;
  border: 1px solid #367AF6;
  border-radius: 30rpx;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
}

.modal-dialog {
  width: 100%;
  background-color: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-title {
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 30rpx;
  color: #1D2129;
  border-bottom: 1px solid #F2F3F5;
}

.modal-content {
  padding: 30rpx;
}

.modal-buttons {
  display: flex;
  height: 90rpx;
  border-top: 1px solid #F2F3F5;
}

.modal-btn {
  flex: 1;
  height: 100%;
  line-height: 90rpx;
  border: none;
  font-size: 30rpx;
  background-color: transparent;
}

.modal-btn.cancel {
  color: #606266;
  border-right: 1px solid #F2F3F5;
}

.modal-btn.confirm {
  color: #367AF6;
}

/* 联系飞手弹窗 */
.contact-info {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
  font-size: 28rpx;
}

.contact-label {
  color: #86909C;
  width: 120rpx;
}

.contact-value {
  color: #1D2129;
  flex: 1;
}

.contact-note {
  background-color: #FFF7E8;
  color: #E87722;
  font-size: 24rpx;
  padding: 16rpx;
  border-radius: 8rpx;
  margin-top: 10rpx;
  line-height: 1.6;
}

/* 筛选弹窗 */
.filter-modal {
  max-height: 90vh;
}

.filter-content {
  padding: 20rpx 30rpx;
}

.filter-section {
  margin-bottom: 30rpx;
}

.filter-section-title {
  font-size: 28rpx;
  color: #1D2129;
  margin-bottom: 20rpx;
  font-weight: 500;
}

/* 范围选项 */
.range-options {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.range-option {
  padding: 12rpx 24rpx;
  background-color: #F2F3F5;
  border-radius: 24rpx;
  font-size: 24rpx;
  color: #4E5969;
}

.range-option.selected {
  background-color: #367AF6;
  color: #fff;
}

/* 技能选项 */
.skill-options {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.skill-option {
  padding: 12rpx 24rpx;
  background-color: #F2F3F5;
  border-radius: 24rpx;
  font-size: 24rpx;
  color: #4E5969;
}

.skill-option.selected {
  background-color: #ECF2FF;
  color: #367AF6;
  border: 1px solid #367AF6;
}

/* 评分滑块 */
.rating-slider {
  padding: 10rpx 0 20rpx;
}

.rating-display {
  text-align: right;
  font-size: 24rpx;
  color: #86909C;
  margin-top: 10rpx;
}

/* 动画 */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 响应式调整 */
@media (max-width: 375px) {
  .pilot-stats {
    flex-wrap: wrap;
  }
  
  .stat-item {
    margin-bottom: 8rpx;
  }
}
</style>
